<script setup lang="ts">
import type { PropType } from 'vue'
import { computed } from 'vue'
import { parseSecurityCodes, hasPermission, type SimpleSecurity } from '@/utils/resource-security'

const props = defineProps({
  ownedCodes: {
    type: Array as PropType<string[] | undefined>
  },
  codes: {
    type: [String, Object] as PropType<string | SimpleSecurity | null | undefined>
  },
  codeNameMap: {
    type: Object as PropType<Record<string, string> | undefined>
  }
})

// computed
const security = computed(() => {
  if (typeof props.codes == 'string') {
    return parseSecurityCodes(props.codes || '')
  } else if (props.codes) {
    return props.codes
  } else {
    return { codes: [] }
  }
})

const validOwnedCodeCount = computed(() => {
  if (props.ownedCodes) {
    return security.value.codes.filter((code) => {
      return hasPermission(props.ownedCodes!, code)
    }).length
  } else {
    return 0
  }
})

function parseSecurityTagType(code: string) {
  if (props.ownedCodes) {
    return hasPermission(props.ownedCodes!, code) ? 'success' : 'info'
  } else {
    return 'info'
  }
}

function parseCodeToName(code: string): string {
  if (props.codeNameMap) {
    return props.codeNameMap[code] || ''
  } else {
    return ''
  }
}
</script>

<template>
  <div class="security-display">
    <template v-if="security.codes.length == 0">
      <span>-</span>
    </template>
    <template v-else-if="security.codes.length == 1">
      <template v-if="security.codes[0]">
        <el-tooltip
          v-if="parseCodeToName(security.codes[0]) != ''"
          placement="top"
          effect="light"
          :content="parseCodeToName(security.codes[0])"
        >
          <template #default>
            <el-tag size="default" :type="parseSecurityTagType(security.codes[0])">{{
              security.codes[0]
            }}</el-tag>
          </template>
        </el-tooltip>

        <el-tag v-else size="default" :type="parseSecurityTagType(security.codes[0])">{{
          security.codes[0]
        }}</el-tag>
      </template>
      <span v-else>-</span>
    </template>

    <el-popover
      v-else
      popper-class="security-display-popover"
      placement="right-end"
      width="180"
      trigger="click"
    >
      <template #default>
        <div v-for="(code, index) in security.codes" :key="index" class="text item">
          <el-divider v-if="index > 0" content-position="left">{{ security.logic }}</el-divider>
          <el-tooltip
            v-if="parseCodeToName(code) != ''"
            placement="top"
            effect="light"
            :content="parseCodeToName(code)"
          >
            <template #default>
              <el-tag size="default" :type="parseSecurityTagType(code)">{{ code }}</el-tag>
            </template>
          </el-tooltip>
          <el-tag v-else size="default" :type="parseSecurityTagType(code)">{{ code }}</el-tag>
        </div>
      </template>
      <template #reference>
        <el-link type="primary" :underline="false" size="default" circle>
          <template v-if="ownedCodes">{{ validOwnedCodeCount }} / </template>
          {{ security.codes.length }}</el-link
        >
      </template>
    </el-popover>
  </div>
</template>
<style lang="scss">
.security-display-popover {
  .el-divider.el-divider--horizontal {
    margin: 12px 0;
    .el-divider__text {
      font-size: 12px;
    }
  }
}
</style>
